<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>阿福易购-首页</title>
    <link rel="stylesheet" href="/css/app.css">
</head>
<body ontouchstart="">
<header class="ui-header ui-header-stable  af-header">
    <ul class="ui-row-flex">
        <li class="ui-col ui-flex ui-flex-pack-start">
            <i ontouchstart="window.history.back();" class="ui-icon-return"></i>
        </li>
        <li class="ui-col ui-flex ui-flex-pack-center">
            <h1>评论</h1>
        </li>
        <li class="ui-col ui-flex ui-flex-pack-end">
        </li>
    </ul>
</header>

<div class="ui-container">
    <div class="ui-tab" id="tab1">
        <ul id="goodsId" data-id="123" class="ui-tab-nav ui-border-b ui-comments-nav">
            <li class="current" data-type="allComment">全部(328)</li>
            <li data-type="goodComment">好评(300)</li>
            <li data-type="middleComment">中评(20)</li>
            <li data-type="badComment">差评(8)</li>
        </ul>
        <ul class="ui-tab-content ui-comments">
            <li id="listWrap">
                <ul class="ui-list ui-list-pure">
                    <li>
                        <h5><span>18703644856</span><span class="date"> 6月12日</span></h5>
                    </li>
                    <li class="af-border-t">
                        <div class="ui-score ui-score-lg"><div class="ui-score-light ui-score-lg" style="width: 80%;"></div></div>
                        <h6>这本书太赞了，每次看都有不一样的体会和感悟，超级喜欢！期待大结局。</h6>
                        <ul class="ui-row ui-comments-pictures">
                            <li class="ui-col ui-col-25">
                                <div class="ui-grid-halve-img">
                                    <span style="background-image:url(http://afyg.img-cn-qingdao.aliyuncs.com/abab784715ecbc2e20b280efc9a7fbf0.jpg@!70-70)"></span>
                                </div>
                            </li>
                            <li class="ui-col ui-col-25">
                                <div class="ui-grid-halve-img">
                                    <span style="background-image:url(http://afutest.img-cn-qingdao.aliyuncs.com/62a01c324a0b781444ac039738eb4ed7.png@!70-70)"></span>
                                </div>
                            </li>
                            <li class="ui-col ui-col-25">
                                <div class="ui-grid-halve-img">
                                    <span style="background-image:url(http://afyg.img-cn-qingdao.aliyuncs.com/abab784715ecbc2e20b280efc9a7fbf0.jpg@!70-70)"></span>
                                </div>
                            </li>
                            <li class="ui-col ui-col-25">
                                <div class="ui-grid-halve-img">
                                    <span style="background-image:url(http://afyg.img-cn-qingdao.aliyuncs.com/abab784715ecbc2e20b280efc9a7fbf0.jpg@!70-70)"></span>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
                <ul class="ui-list ui-list-pure">
                    <li>
                        <h5><span>18703644856</span><span class="date"> 4月12日</span></h5>
                    </li>
                    <li class="af-border-t">
                        <div class="ui-score"><div class="ui-score-light" style="width: 90%;"></div></div>
                        <h6>这本书太赞了，每次看都有不一样的体会和感悟，超级喜欢！期待大结局。</h6>
                        <ul class="ui-row ui-comments-pictures">
                            <li class="ui-col ui-col-25">
                                <div class="ui-grid-halve-img">
                                    <span style="background-image:url(http://afyg.img-cn-qingdao.aliyuncs.com/abab784715ecbc2e20b280efc9a7fbf0.jpg@!70-70)"></span>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <!--评论不足10条隐藏-->
        <div class="J-loading ui-loading-wrap af-hide">
            <p>正在加载中...</p>
            <i class="ui-loading"></i>
        </div>
    </div>


</div>

<!--图片预览-->
<div id="previewBox" class="comment-slide" >
    <header class="ui-header ui-header-stable af-header">
        <ul class="ui-row-flex">
            <li class="ui-col ui-flex ui-flex-pack-start">
                <i class="ui-icon-return"></i>
            </li>
            <li class="ui-col ui-flex ui-flex-pack-center">
                <h1><span class="J-lNum">1</span>/<span class="J-rNum">1</span></h1>
            </li>
            <li class="ui-col ui-flex ui-flex-pack-end">
            </li>
        </ul>
    </header>
    <div class="ui-container">

        <section class="ui-slider" data-diy="true">
            <ul class="ui-slider-content">
                <!--<li><img src="http://placeholder.qiniudn.com/800x800"></li>-->
            </ul>
        </section>

        <div class="content">
            买了一个还送一个  一共两个划算得很 就是价格还便宜点就好了   下次还要买一个 钱不是问题
        </div>
    </div>
</div>

<script type="text/html" id="tpl">
    <ul class="ui-list ui-list-pure" id="${id}">
        <li>
            <h5><span>${phone}</span><span class="date">${add_time}</span></h5>
        </li>
        <li class="af-border-t">
            <div class="ui-score"><div class="ui-score-light" style="width: ${score}%;"></div></div>
            <h6>${content}</h6>
            <ul class="ui-row ui-comments-pictures">
                ${picHtml}
            </ul>
        </li>
    </ul>
</script>
<script type="text/html" id="picTpl">
    <li class="ui-col ui-col-25">
        <div class="ui-grid-halve-img">
            <span style="background-image:url(${imgUrl})"></span>
        </div>
    </li>
</script>
<script src="/lib/zepto.min.js"></script>
<script src="/js/frozen.js"></script>
<script src="/js/app.min.js"></script>
<script>
    $(function () {
        var loading=$('.J-loading');
        var tpl=$('#tpl').html();
        var picTpl=$('#picTpl').html();
        var listWrap=$('#listWrap');
        var curTab=$('#tab1 .current');
        var gid=$('#goodsId').attr('data-id');
        var ajaxData={
            goods_id:gid,
            condition:'allComment',
            page:1,
            _token:_token
        };
        scrollLoading();

        //切换标签时  从第一页加载；当前标签页点击标签时 滚动到顶部
        $('#tab1').on('click','.ui-tab-nav li',function () {
            var that=$(this);
            var page=that.data('page');
            if(that.hasClass('current')){
                return false;
            }

            that.data('page',2);
            that.addClass('current').siblings('.current').removeClass('current');
            ajaxData.condition=that.data('type');
            ajaxData.page=page;

            //修改列表内容
            listWrap.html('');
            loading.css({'display':'-webkit-box'});

            ajaxComment(ajaxData,function (res) {
                //判断是否为最后一页  处理  加载中。。。提示
                if(res.comments.data.length<10) loading.hide();
                var newHtml=renderList(res.comments.data);
                listWrap.html(newHtml);
                that.data('page',res.comments.current_page+1);
            });
        });

        function renderList(data) {
            var result=[];
            for(var i=0;i<data.length;i++){
                console.log(data[i].mobile_picture);
                if(data[i].mobile_picture){
                    data[i].picHtml=renderPic(data[i].mobile_picture.split(','));
                }else{
                    data[i].picHtml='';
                }
                data[i].score=data[i].star*20;
                result.push(HtmlTemplate(tpl,data[i],true));
            }

            return result.join("");
        }
        function renderPic(picArr) {
            var  arr=[];
            for(var i=0;i<picArr.length;i++){
                arr.push(HtmlTemplate(picTpl,{imgUrl:picArr[i]},true));
            }

            return arr.join("");
        }
        function ajaxComment(data,callback) {

            $.ajax({url:'/ajax_comment.json',type:'get',dataType:'json',data:data,
                success:function (res) {
                    if(res.comments.data.length){
                        typeof callback==='function'&&callback(res);
                    }else{
                        topTip('评论加载完成');
                    }

                },
                error:function (error,errorType) {
                    topTip(error.message,{type:'warn'});
                }
            });
        }
        function scrollLoading() {
            var body = $('body');
            DelCookie('scroll_loading');

            $(window).on('scroll',function () {
                var scrollTop=body.scrollTop();
                var winH=$(window).height();
                var docH=body.height();
                if(scrollTop+winH>docH-150&&!GetCookie('scroll_loading')){

                    //修改列表内容
                    loading.css({'display':'-webkit-box'});

                    SetCookie('scroll_loading',1);
                    var curTab=$('#tab1 .current');
                    ajaxData.condition=curTab.attr('data-type');
                    ajaxData.page=curTab.data('page')||1;
                    ajaxComment(ajaxData,function (res) {
                        //判断是否为最后一页  处理加载中。。。提示
                        if(res.comments.data.length<10) loading.hide();
                        var newHtml=renderList(res.comments.data);
                        listWrap.append(newHtml);
                        curTab.data('page',res.comments.current_page+1);
                        DelCookie('scroll_loading');
                    });
                }
            });
        }
    });

</script>
<script>
    $(function () {
        //picture preview

        var box=$('#previewBox');
        var lNum=box.find('.J-lNum');
        var rNum=box.find('.J-rNum');
        var content=box.find('.content');

        $('#listWrap').on('click','.ui-grid-halve-img',function () {
            var ul=$(this).closest('ul');
            var pictures=ul.find('span');
            var urls=[];
            for(var i=0;i<pictures.length;i++){
                var imgSrc=pictures.eq(i).css('background-image');
                imgSrc = imgSrc.replace(/url\("?/,"");//去掉 url("
                imgSrc = imgSrc.replace(/"?\)/,"");//去掉后面的 ")
                imgSrc = imgSrc.replace(/70-70/,"800-800");//去掉后面的 ")
                urls.push(imgSrc);
            }

            var lis=[];

            for(var j=0;j<urls.length;j++){
                lis.push('<li><img src="'+urls[j]+'"></li>')
            }

            content.text(ul.siblings('h6').html());
            lNum.text(1);
            rNum.text(lis.length);
            box.find('.ui-slider-content').html(lis.join(""));
            box.animate({'left':'0'},200);

            //预览图滚动
            var slider = new fz.Scroll('.ui-slider', {
                role: 'slider',
                indicator: true,
                interval: 3000
            });
            slider.on('scrollEnd', function(index) {
                lNum.text(index+1);
            });

        });

        content.on('click',function () {
            var that=$(this), maxH='';
            if(that.hasClass('autoH')){
                maxH='115px';
            }else{
                maxH='none';
            }

            that.toggleClass('autoH');
            that.css('max-height',maxH);
        });

        box.on('click','.ui-icon-return',function () {
            box.animate({'left':'100%'},100);
        });


    });
</script>
</body>
</html>